import React, { useEffect,useRef,useState } from 'react'
import {Link} from 'react-router-dom'
import { connect } from 'react-redux'
import { rootState } from '@/store'
import {getTabIcons} from '@/store/actionCreators'
import IconsItem from '@/components/IconsItem'
import Banners from '@/components/Banners'
import Rank from '../Rank'
import { 
  HomeWrapper,
} from './style'
import { useScroll } from 'ahooks'


interface HomeProps {
  loading: boolean;
  tabicons:any[]
  getTabIcons: () => void;
}

const Home : React.FC<HomeProps> = (props) => {
  const {
    loading,
    tabicons
  } = props
  const {
    getTabIcons
  } = props
  useEffect(() => {
    if(!tabicons.length) {
      getTabIcons();
    }
  }, [])
  // const [searchHidden, setSearchHidden] = useState(false);
  // const searchRef:any = useRef(null)
  // const scroll = useScroll()
  // 监听屏幕滚动，超出顶部，组件吸顶
  // useEffect(() => {
  //     if(scroll && scroll.top > 0){
  //         if(!searchHidden && searchRef.current){
  //             setSearchHidden(true);
  //             searchRef.current.style.position = 'fixed'
  //             searchRef.current.style.backgroundColor ='white'
  //             searchRef.current.style.zIndex = '9999'
  //             searchRef.current.style.opacity = '0.5'
  //         }
  //     }else {
  //         if(searchHidden && searchRef.current){
  //             searchRef.current.style = ''
  //             setSearchHidden(false);
  //         }
  //     }
  //     if(scroll && scroll.top > 10){
  //         searchRef.current.style.backgroundColor ='rgb(242, 243, 244)'
  //         searchRef.current.style.opacity = '1'
  //     }
  // }, [JSON.stringify(scroll)])
  const  iconsElements = tabicons.map(
    (icons,index) =>{ 
    return <IconsItem 
      icons={icons}
      key={index} 
      showStatistics={true} 
    />}
    )
  return (
    <HomeWrapper>
      <div className="home-top">
        <div className="title-bar">
          <img src="https://gw.alicdn.com/imgextra/i3/O1CN014dT6kJ1ugHHRfWLwn_!!6000000006066-2-tps-460-120.png_570x10000.jpg"/>
          <div className="title-icon">
            <img className="icon-left" src=""/>
            <span>我的</span>
            <img className="icon-right" src=""/>
          </div>
        </div>
        <div className="home-search">
            <div className="placeholder">泰国签证</div>
            <div className="btn-search">搜索</div>
        </div>
      </div>
      <div className="home-card">
        <div className='card-list'>
        {iconsElements}
        </div>
      </div>
      <Banners/>
      <Link to = '/ranking'>
      <div className="home-list">
        <div className="home-list-title">
          <img className='title-icon'
            src=""
            />
          <span style={{"color":"#42664b"}}>飞猪排行榜</span>
          <span className='list-title-sub'>让旅行更简单</span>
          <div className='list-title-more'>
            <span className='list-title-more-text'>榜单广场</span>
            <img src=""/>
          </div>
        </div>
        <div className="home-list-container">
          <div className="home-list-item">
            <img src="https://gw.alicdn.com/imgextra/i1/O1CN01z2BVU51Cvznfi08Rb_!!6000000000144-0-tps-5760-3840.jpg_220x10000Q75.jpg_.webp"/>
            <div className="list-item-badge">
              <img src="https://gw.alicdn.com/imgextra/i1/O1CN01LplnWL21a3AWYnt55_!!6000000007000-2-tps-33-36.png_110x10000.jpg_.webp"/>
              <div className="list-item-badge-text">
                毕业旅行好去处
              </div>
              <span className="list-item-title">全国·景点榜</span>
            </div>
          </div>
          <div className="home-list-item">
            <img src="https://gw.alicdn.com/imgextra/i4/O1CN01EJKiZG1rOvQnR1caj_!!6000000005622-2-tps-2144-1346.png_220x10000.jpg_.webp"/>
            <div className="list-item-badge">
              <img src="https://gw.alicdn.com/imgextra/i1/O1CN01LplnWL21a3AWYnt55_!!6000000007000-2-tps-33-36.png_110x10000.jpg_.webp"/>
              <div className="list-item-badge-text">
                城市热门...
              </div>
              <span className="list-item-title">三亚·景点榜</span>
            </div>
          </div>
          <div className="home-list-item">
            <img src="https://gw.alicdn.com/imgextra/i4/6000000001302/O1CN01PSkXPQ1LUMNUQN5J1_!!6000000001302-0-fliggyimage.jpg_220x10000Q75.jpg_.webp"/>
            <div className="list-item-badge">
              <img src="https://gw.alicdn.com/imgextra/i1/O1CN01LplnWL21a3AWYnt55_!!6000000007000-2-tps-33-36.png_110x10000.jpg_.webp"/>
              <div className="list-item-badge-text">
                无限欢乐...
              </div>
              <span className="list-item-title">北京·景点榜</span>
            </div>
          </div> 
        </div>
      </div>
      </Link>
      <Rank/>
        
    </HomeWrapper>
  )
}

// const mapStateToProps = (state :rootState) => ({
//   loading: state.loading,
//   tabicons:state.tabicons
// })

// const mapDispatchToProps = (dispatch :Dispatch) => ({
//   getIconsRequestDispatch() {
//     dispatch(getIconsRequest())
//   }
// })
export default connect(
  (state :rootState) => ({
    loading: state.loading,
    tabicons:state.home.tabicons
  }),
  {
   getTabIcons
  }
)(Home)